<!DOCTYPE html>
<html>
  <head>
    <title>TransitionSync</title>
    <script src="d3.min.js"></script>
  </head>
  <body>
    <svg width="1600" height="800" id="mainsvg" class="svgs" style='display: block; margin: 0 auto;'></svg>
    <script>
        const data = [{name: 'Shao-Kui', value:6},
        {name:'Wen-Yang', value:6}, {name:'Cai Yun', value:16}, {name:'Liang Yuan', value: 10}, 
        {name:'Yuan-Chen', value:6}, {name:'Rui-Long', value:10}, {name:'Dong Xin', value:12}, 
        {name:'He Yu', value:20}, {name:'Xiang-Li', value:12}, {name:'Wei-Yu', value:15}, {name:'Chen Zheng', value:14}, 
        {name:'Yu Peng', value:15}, {name:'Li Jian', value:18}]; 

        const svg = d3.select('#mainsvg');
        const width = +svg.attr('width');
        const height = +svg.attr('height');
        const margin = {top: 60, right: 30, bottom: 60, left: 150};
        const innerWidth = width - margin.left - margin.right;
        const innerHeight = height - margin.top - margin.bottom;

        const xScale = d3.scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .range([0, innerWidth]);

        const yScale = d3.scaleBand()
        .domain( data.map(d => d.name) )
        .range([0, innerHeight])
        .padding(0.1);

        const g = svg.append('g').attr('id', 'maingroup')
        .attr('transform', `translate(${margin.left}, ${margin.top})`);

        const xAxis = d3.axisBottom(xScale);
        g.append('g').call(xAxis).attr('transform', `translate(${0}, ${innerHeight})`);

        const yAxis = d3.axisLeft(yScale);
        g.append('g').call(yAxis);

        d3.selectAll('.tick text').attr('font-size', '2em');
        g.append('text').text('Members of CSCG').attr('font-size', '3em')
        .attr('transform', `translate(${innerWidth/2}, ${0})`)
        .attr('text-anchor', 'middle');

        const rects = g.selectAll('rect').data(data).join('rect')
        .attr('fill', 'green').attr('opacity', 0.8)
        .attr('y', d => yScale(d.name)).attr('height', yScale.bandwidth());

        const texts = g.selectAll('.datatext').data(data).join('text')
        .attr('class', 'datatext').text(d => d.value)
        .attr('y', d => yScale(d.name) + 5 + yScale.bandwidth() / 2)

        var formatPercent = d3.format(".2f");
        console.log(435.1241241234);
        console.log(formatPercent(435.1241241234)); // 435.12
        console.log(66.818213412314);
        console.log(formatPercent(66.813213412314)); // 66.81

        (async () => {
            while(true){
                data.forEach(d => {
                    d.value = Math.random() * 20;
                });
                let transition = d3.transition().duration(1000)//.ease(d3.easeElastic);

                rects.transition(transition) 
                .attr('width', d => xScale(d.value))
                .attr('fill', () => d3.interpolateRainbow(Math.random()));

                texts.transition(transition)
                .attr('x', d => xScale(d.value))
                .text(d => formatPercent(d.value));
                
                await transition.end();
            }
        })()
    </script>
  </body>
</html>